<extend name="zh_cn:Public:base" />
<block name="title">
    <title>图片展示</title>
</block>
<block name="extendHead">
    <link rel="stylesheet" type="text/css" href="/Public/jslib/swiper/swiper.min.css"/>
    <style type="text/css"> 
        body{
            background: #fff;
        }
        li{
            list-style: none;
            background-image: url(/Public/uclbrt/image/placeholder.jpg);
            background-size: 100% 100%;
        }        
        img{
            width: 100%;
            border: none;
            height: 420px;
        }
        @media (max-width: 420px) {
            img{
                height: 240px;
            }
        }
        @media (max-width: 380px) {
            img{
                height: 214px;
            }
        }
        @media (max-width: 320px) {
            img{
                height: 180px;
            }
        }        
    </style>
</block>
<block name="document">
        <div id="doc" class="container">
            <div class="swiper-container">
            	<div class="swiper-wrapper"></div>
            </div>  
        </div>
        <script type="text/html" id="templateSwiper">
            <li class="swiper-slide swiper-slide-active">
                <dt><img/></dt>
            </li>
        </script>
</block>
<block name="extendFootJs">
    <script type="text/javascript" src="/Public/jslib/swiper/swiper.min.js"></script>
    <script type="text/javascript" src="/Public/jslib/zoom/js/e-smart-zoom-jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var getParams = getArgs();
            var pic = getParams.pic.split(","); 
            var swiperWrapper = $('.swiper-wrapper');
            var swiperHTML = '';
            for (i=0;i<pic.length ;i++ ){ 
                var templateSwiperHTML = $($('#templateSwiper').clone().html());
                templateSwiperHTML.find('img').attr('src',pic[i]);
                swiperHTML += templateSwiperHTML.prop('outerHTML');
            }
            swiperWrapper.append(swiperHTML);    
            var swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                effect: 'coverflow',
                grabCursor: true,
                centeredSlides: true,
                slidesPerView: 'auto',
                coverflow: {
                    rotate: 50,
                    stretch: 0,
                    depth: 100,
                    modifier: 1,
                    slideShadows : true
                }
            });
            $('.swiper-container').smartZoom({'containerClass':'zoomableContainer'});
            $('#doc').click(function(){
                window.history.back(-1);
            });
        })
    </script>
</block>